import { Stepper, Grid } from 'antd-mobile';
import React, { Component } from 'react';
import { car_list } from "../../../api/index";
import '../../../styles/index/car/List.scss'

class List extends Component {
  constructor(props) {
    super(props)
    this.state = {
      list: [],
      list2: []
    }
  }
  async componentDidMount() {
    var res = await car_list()
    console.log(res.data);
    this.setState({ list: res.data })
  }
  // 勾选商品
  gouxuan(item) {
    item.state = !item.state
    console.log(this.state.list);
  }
  // 更改购物车商品数量
  carNum(value) {
    console.log(value);

  }
  // 总价
  money() {
    var money = 0
    this.state.list.forEach((item) => {
      if (item.state) {
        money = item.num * item.price
      }
    })
    return money
  }
  render() {
    return (
      <div className='list3'>
        <div className="main3">
          {
            this.state.list.map((item, index) => {
              return (
                <div className="item3"
                  key={index}
                >
                  <input type="checkbox" onClick={() => { this.gouxuan(item) }} />
                  <div className="tu3"><img src={item.pic} alt="" /></div>
                  <div className="wenzi3">
                    <p className='p1'>{item.name}</p>
                    <p className='p2'>{item.introduce}</p>
                    <p className='p3'>￥{item.price}</p>
                  </div>
                  <div className="num3">
                    <Stepper
                      defaultValue={1}
                      min={0}
                      max={5}
                      style={{
                        '--border-inner': 'none',
                        '--height': '24px',
                        '--input-width': '20px',
                        '--border-radius': '20px',
                        '--input-font-size': '12px',
                        '--button-font-size': '12px',
                        '--button-text-color': 'black'
                      }}
                      onChange={(value) => { this.carNum(value) }}
                    />
                  </div>
                </div>
              )
            })
          }
        </div>
        <div className="bottom3">
          <Grid columns={10} gap={8}>
            <Grid.Item span={2}>
              <div className='d31'>
                <input type="checkbox" />全选
              </div>
            </Grid.Item>
            <Grid.Item span={5}>
              <div className='d32'>总计￥:{this.money()}</div>
            </Grid.Item>
            <Grid.Item span={3}>
              <div className='d33'>去结算</div>
            </Grid.Item>
          </Grid>
        </div>
      </div>
    );
  }
}

export default List;